<template>
        <div class="mark"></div>
        <div class="model">
            <div><slot name="title">{{title}}</slot></div>
            <div>body内容</div>
            <div class="footer">footer</div>
        </div>
</template>
    
<script setup lang='ts'>
interface Props {
    title: string
}
const props = defineProps<Props>() 
</script>
    
<style scoped >
.mark{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
}    
.model{
    width: 400px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    
}
.footer{
    position: absolute;
    bottom: 0;
    }
</style>